<template>
  <PageContainer>
    <view class="container">
      <Header title="附件管理" />
      <Paglist v-model="dataList" :parame="parame" :is-init-api="false" @register="register">
        <template v-for="v in dataList" :key="v.id">
          <view
            class="attachment-item"
            @click="openDocument({ filePath: v.url, customFileName: v.name.split('.')[0] })"
          >
            <view class="file-name ov-1">
              <image class="file-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/file-icon.png" />
              <text class="ov-1" style="flex: 1">{{ v.name }}</text>
            </view>
            <view class="file-info">
              <view class="left ov-1">
                <text>{{ v.sizeStr }}</text>
                <text class="px-20">{{ v.createTime }}</text>
                <text>{{ v.uploadUserName }}</text>
              </view>
              <view class="del-btn" @click.stop="del(v)">
                <text class="ali-icon">&#xe674;</text>
                <text>删除</text>
              </view>
            </view>
          </view>
        </template>
      </Paglist>
      <TButtonGroup>
        <TButton
          class="gutter-btn"
          text="上传附件"
          type="primary"
          @click="chooseFile({ mediaType: 'doc' })"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* attachmentManager 附件管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref, watch } from 'vue';
  import { attachmentList, attachmentAdd, attachmentDel } from '@/api/admin';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { type ResultItem, useUpload } from '@/hooks/core/useUpload';
  import { Toast } from '@/utils';
  import { type AttachmentListResult } from '@/api/admin/types';

  provide('api', attachmentList);

  const [register, { refresh }] = useConList();

  const { chooseFile, delResultItem, successResult, openDocument } = useUpload({ count: 1 });

  const dataList = ref<AttachmentListResult[]>([]);

  const parame = reactive({
    memberId: Infinity,
  });

  onLoad<'attachmentManager'>((op) => {
    parame.memberId = op.memberId;
    refresh();
  });

  watch(
    successResult,
    (val) => {
      fileUpload(val[val.length - 1]);
    },
    { deep: true },
  );

  function fileUpload(file: ResultItem) {
    attachmentAdd({
      memberId: parame.memberId,
      size: file.fileSize || 0,
      url: file.filePath as string,
      name: `${file.fileName}.${file.extension}` as string,
    })
      .then(() => {
        Toast('上传成功');
        refresh();
      })
      .finally(() => delResultItem(0));
  }

  function del(item: AttachmentListResult) {
    uni.showModal({
      title: '提示',
      content: '是否立即删除该附件?',
      success: ({ confirm }) => {
        if (!confirm) return;
        attachmentDel(item.id).then(() => {
          Toast('删除成功');
          refresh();
        });
      },
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 20rpx;
    .attachment-item {
      background-color: #fff;
      height: 140rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
      padding: 0 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .file-name {
      color: #333;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      .file-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
      }
    }

    .file-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      color: #aaabab;
      .del-btn {
        flex-shrink: 0;
        white-space: nowrap;
        margin-left: 30rpx;
        .ali-icon {
          margin-right: 6rpx;
        }
      }
    }
  }
</style>
